#直線ラジアル軸
線形放射状スケールは、数値データをグラフ化するために使用されます。名前が示すように、線形補間は、軸の中心に対する値の位置を決定するために使用されます。
ラジアル リニア スケールでは、次の追加構成オプションが提供されます。
#構成オプション
#リニアラジアル軸固有のオプション
名前空間:options.scales[scaleId]
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
animate | boolean | true | グラフの中心からの拡大縮小をアニメーション化するかどうか |
angleLines | object | アングルライン構成。もっと... | |
beginAtZero | boolean | false | true の場合、スケールにはまだ含まれていない場合は 0 が含まれます。 |
pointLabels | object | ポイントラベルの構成。もっと... | |
startAngle | number | 0 | スケールの開始角度。度では 0 が頂点になります。 |
#全軸共通オプション
名前空間:options.scales[scaleId]
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
type | string | 使用されているスケールの種類。カスタム スケールを作成し、文字列キーを使用して登録できます。これにより、グラフの軸のタイプを変更できます。 | |
alignToPixels | boolean | false | ピクセル値をデバイスのピクセルに合わせます。 |
backgroundColor | Color | スケール領域の背景色。 | |
display | boolean |string | true | 軸のグローバル可視性を制御します (次の場合に表示されます)。true 、いつ隠されるかfalse )。いつdisplay: 'auto' 、軸は、少なくとも 1 つの関連データセットが表示されている場合にのみ表示されます。 |
grid | object | グリッドラインの構成。もっと... | |
min | number | ユーザー定義のスケールの最小値。データの最小値をオーバーライドします。もっと... | |
max | number | ユーザー定義のスケールの最大値。データの最大値をオーバーライドします。もっと... | |
reverse | boolean | false | スケールを逆にします。 |
stacked | boolean |string | false | データをスタックする必要があります。もっと... |
suggestedMax | number | データの最大値を計算するときに使用される調整。もっと... | |
suggestedMin | number | 最小データ値を計算するときに使用される調整。もっと... | |
ticks | object | 設定にチェックマークを付けます。もっと... | |
weight | number | 0 | 軸のソートに使用される重み。重みが大きいほど、チャート領域から遠くなります。 |
#ティック設定
#線形半径軸固有のティック オプション
名前空間:options.scales[scaleId].ticks
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
count | number | はい | undefined | 生成するティックの数。指定した場合、これは自動生成をオーバーライドします。 |
format | object | はい | のIntl.NumberFormat (新しいウィンドウが開きます)デフォルトのラベルフォーマッタで使用されるオプション | |
maxTicksLimit | number | はい | 11 | 表示する目盛りとグリッド線の最大数。 |
precision | number | はい | 定義されていれば、stepSize が指定されていない場合、ステップ サイズはこの小数点以下の桁数に四捨五入されます。 | |
stepSize | number | はい | ユーザー定義のスケールの固定ステップ サイズ。もっと... |
#すべての軸に共通の目盛オプション
名前空間:options.scales[scaleId].ticks
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
backdropColor | Color | はい | 'rgba(255, 255, 255, 0.75)' | ラベルの背景の色。 |
backdropPadding | Padding | 2 | ラベルの背景のパディング。 | |
callback | function | チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話。 | ||
display | boolean | true | true の場合、目盛りラベルを表示します。 | |
color | Color | はい | Chart.defaults.color | ダニの色。 |
font | 17177dd6-0お父さん-47be-8b2c-ffd18236d32d | はい | Chart.defaults.font | 見るフォント |
major | object | {} | メジャーティックの設定。 | |
padding | number | 3 | 軸からの目盛りラベルのオフセットを設定します。 | |
showLabelBackdrop | boolean | はい | true 放射状スケールの場合、false さもないと | true の場合、目盛ラベルの後ろに背景を描画します。 |
textStrokeColor | Color | はい | 「」 | テキストの周囲のストロークの色。 |
textStrokeWidth | number | はい | 0 | テキストの周囲のストロークの幅。 |
z | number | 0 | 目盛りレイヤーの Z インデックス。チャート領域に目盛りを描画する場合に便利です。値 <= 0 はデータセットの下に描画され、値 > 0 は上に描画されます。 |
スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。
#グリッドラインの設定
名前空間:options.scales[scaleId].grid
、軸のグリッド線のオプションを定義します。
名前 | タイプ | スクリプト可能 | インデックス可能 | デフォルト | 説明 |
---|---|---|---|---|---|
borderDash | number[] | [] | グリッド線のダッシュの長さと間隔。見るMDN (新しいウィンドウが開きます)。 | ||
borderDashOffset | number | はい | 0.0 | 破線のオフセット。見るMDN (新しいウィンドウが開きます)。 | |
circular | boolean | false | true の場合、グリッド線は円形になります (レーダーおよび極面図のみ)。 | ||
color | Color | はい | はい | Chart.defaults.borderColor | グリッド線の色。配列として指定した場合、最初の色は最初のグリッド ラインに適用され、2 番目の色は 2 番目のグリッド ラインに適用されます。 |
display | boolean | true | false の場合、この軸のグリッド線を表示しません。 | ||
lineWidth | number | はい | はい | 1 | グリッド線のストローク幅。 |
スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。
#軸範囲の設定
軸範囲設定の数を考慮すると、それらすべてがどのように相互作用するかを理解することが重要です。
のsuggestedMax
とsuggestedMin
設定は、軸のスケールに使用されるデータ値のみを変更します。これらは、自動フィット動作を維持しながら軸の範囲を拡張するのに役立ちます。
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
この例では、正の最大値は 50 ですが、データの最大値は 100 まで拡張されます。ただし、最小データ値は 100 を下回っているため、suggestedMin
設定しても無視されます。
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
とは対照的に、suggested*
設定、min
とmax
設定により、軸に明示的な終端が設定されます。これらを設定すると、一部のデータ ポイントが表示されなくなる場合があります。
#刻み幅
設定されている場合、スケール ティックは次の倍数で列挙されます。stepSize
、増分ごとに 1 ティックになります。設定されていない場合、ティックには Nice Number アルゴリズムを使用して自動的にラベルが付けられます。
この例では、目盛りを作成する y 軸を持つグラフを設定します。0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5
。
let options = {
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
#角度線のオプション
次のオプションは、チャートの中心からポイント ラベルまで放射状に伸びる斜めの線を構成するために使用されます。
名前空間:options.scales[scaleId].angleLines
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
display | boolean | true | true の場合、角度の線が表示されます。 | |
9963d54c-ac7a-4659-97a8-3647011962月 | Color | はい | Chart.defaults.borderColor | 斜めの線の色。 |
lineWidth | number | はい | 1 | 斜めの線の幅。 |
borderDash | number[] | はい1 | [] | 斜めの線のダッシュの長さと間隔。見るMDN (新しいウィンドウが開きます)。 |
borderDashOffset | number | はい | 0.0 | 破線のオフセット。見るMDN (新しいウィンドウが開きます)。 |
- の
borderDash
設定は静的な値または関数のみを受け入れます。配列の配列を渡すことはサポートされていません。
スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。
#ポイントラベルのオプション
次のオプションは、スケールの周囲に表示されるポイント ラベルを構成するために使用されます。
名前空間:options.scales[scaleId].pointLabels
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
backdropColor | Color | true | undefined | ポイントラベルの背景色。 |
backdropPadding | Padding | 2 | ラベルの背景のパディング。 | |
borderRadius | number |object | true | 0 | ポイントラベルの境界半径 |
display | boolean |string | true | true の場合、ポイント ラベルが表示されます。いつdisplay: 'auto' 、別のラベルと重なる場合、ラベルは非表示になります。 | |
callback | function | データラベルをポイントラベルに変換するコールバック関数。デフォルトの実装は単に現在の文字列を返します。 | ||
color | Color | はい | Chart.defaults.color | ラベルの色。 |
font | Font | はい | Chart.defaults.font | 見るフォント |
245fe871-2fc9-4a61-b422-b03d91482acf | number | はい | 5 | チャートとポイントのラベルの間のパディング。 |
centerPointLabels | boolean | false | true の場合、ポイント ラベルは中央に配置されます。 |
スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。
#内部データ形式
内部的には、リニアラジアルスケールは数値データを使用します。